<template>
	<view class="content">
		<u-search bg-color="#fff" placeholder="搜索商家" :clearabled="true" :show-action="false" action-text="搜索" :animation="true" v-model="searchKey" @search="search"></u-search>
		<view class="coupon-list" v-for="merchant in merchantList" v-if="merchant.couponList.length>0">
			<view class="coupon-title" @click="navMerchant(merchant)">{{merchant.merchantName}}<u-icon name="arrow-right"></u-icon></view>
			<coupon-item class="coupon-item" :coupon="item" :isAction="item.isAction" :actionText="item.actionText" :noActionText="item.noActionText" @eventClick="getCoupon(item)" v-for="item in merchant.couponList"></coupon-item>
		</view>
		<uni-load-more :status="loadingType"></uni-load-more>
	</view>
</template>

<script>
	import uniLoadMore from '@/components/uni-load-more/uni-load-more.vue';
	import couponItem from '@/components/coupon-item.vue';
	import {
		mapState,
		mapMutations
	} from 'vuex';
	export default {
		components: {
			uniLoadMore,
			couponItem
		},
		data() {
			return {
				searchKey:'',
				pageNo: 1,
				pageSize: 10,
				merchantList: [],
				total: 0,
				loadingType: ''
			};
		},

		onLoad(options) {
			this.searchCoupon();
		},
		onReachBottom(){
			if(this.loadingType === 'more'){
				this.pageNo = this.pageNo + 1;
				this.searchCoupon();
			}
		},
		computed: {
			...mapState(['hasLogin', 'userInfo', 'footPrint'])
		},
		methods: {
			navMerchant(merchant){
				uni.navigateTo({
					url: '/pages/merchant/detail?id='+merchant.merchantUuid
				})
			},
			search(e){
				this.resetPage();
				this.searchCoupon();
			},
			//搜索优惠券
			searchCoupon() {
				let that = this;
				var postData = {
					startIndex: (this.pageNo - 1) * this.pageSize,
					pageSize: this.pageSize,
					merchantName: this.searchKey
				}
				var keyArray = ['HAS_COUPON'];
				if(this.hasLogin)	
					postData.userUuid = this.userInfo.userUuid;
				if(this.searchKey){
					keyArray.push('MERCHANTNAME');
				}
				postData.keyArray = keyArray;
				this.loadingType = 'loading';
				this.$api.request.merchantCouponList(postData, res => {
					if (res.body.status.statusCode === '0') {
						var merchantList = res.body.data.merchants;
						this.merchantList = this.merchantList.concat(merchantList);
						this.merchantList.forEach(function(merchant,index){
							that.populateCouponAction(merchant.couponList);
						})
						
						this.total = res.body.data.total;
						if(this.merchantList.length>=this.total){
							this.loadingType = 'noMore';
						}else{
							this.loadingType = 'more';
						}
					} else {
						this.loadingType = 'more';
						this.$api.msg(res.body.status.errorDesc);
					}
				},true);
			},
			populateCouponAction(coupons){
				let that = this;
				coupons.forEach(function(coupon,index){
					if(!coupon.receivedCount){
						that.$set(coupon,'isAction',true);
						that.$set(coupon,'actionText','立即领取');
					}else if(coupon.receivedCount==0){
						that.$set(coupon,'isAction',true);
						that.$set(coupon,'actionText','立即领取');
					}else if(coupon.limitPerUser>coupon.receivedCount){
						that.$set(coupon,'isAction',true);
						that.$set(coupon,'actionText','继续领取');
					}else{
						that.$set(coupon,'isAction',false);
						that.$set(coupon,'noActionText','已领取');
					}
				});
			},
			//领取优惠券
			getCoupon(item) {
				if(!this.hasLogin){
					uni.navigateTo({
						url: '/pages/public/login'
					})
					return;
				}
				this.$api.request.getCoupon({
					actionType:'RECEIVE',
					couponDTO:{
						couponUuid: item.couponUuid,
					},
					userDTO: {
						userUuid: this.userInfo.userUuid
					},
					receiveChannel: 'SELF'
				}, res => {
					if (res.body.status.statusCode === '0') {
						var total = res.body.data.total;
						if(item.limitPerUser>total){
							this.$api.msg('还可以领取'+(item.limitPerUser-total)+'张');
							item.isAction=true;
							item.actionText='继续领取';
						}else if(item.limitPerUser==total){
							item.isAction = false;
							item.noActionText='已领取';
						}
					} else {
						this.$api.msg(res.body.status.errorDesc);
					}
				}, false);
			},
			resetPage() {
				this.merchantList = [];
				this.total = 0;
				this.pageNo = 1;
			}
		},
	}
</script>

<style lang="scss">
	page{
		background-color: $page-color-base;
	}
	.content{
		margin: 20upx;
	}

	/* 列表 */
	.coupon-list {
		margin-top: 40upx;
		display: flex;
		flex-wrap: wrap;
		padding: 0 30upx;
		border-radius: 20upx;
		.coupon-item{
			width:100%;
		}
		.coupon-title{
			font-size: 30upx;
			color: $font-color-dark;
			font-weight: 700;
			padding: 20upx 0;
		}
	}
</style>
